<#import "/macro.ftl" as m>
<@m.page_header title='每日一句' />
<div id="page-content-wrapper">
    <div id="page-title">
        <h3>每日一句</h3>
        <div id="breadcrumb-right">
            <div class="float-right">
                <a href="javascript:;" class="btn medium primary-bg" onclick="showAdd();">
                    <span class="button-content">每日一句</span>
                </a>
            </div>
        </div>
    </div>
    <div id="page-content">
    	<form id="form" action="/sentence" method="get">
    		<div class="form-row">
    			<div class="form-input col-md-6">
    				<input placeholder="填写内容查询" type="text" name="content" id="content" value="${content}">
    			</div>
    			<div class="form-input col-md-2">
		        	<a href="javascript:;" class="btn large primary-bg radius-all-4" id="search" title="Validate!" onclick="$('#form').trigger('submit');">
			            <span class="button-content">查询</span>
	                </a>
		        </div>
    		</div>
    	</form>
    	<table id="sentence" class="table">
	        <thead>
	            <tr>
	                <th>内容(30个字以内)</th>
	                <th>开始时间</th>
	                <th>结束时间</th>
	                <th>编辑者</th>
	                <th>编辑时间</th>
	                <th>是否在线</th>
	                <th>操作</th>
	            </tr>
	        </thead>
	        <tbody>
	        	<tr id="sentence-row-template" class="hide">
	                <td id="content"></td>
	                <td id="startTime"></td>
	                <td id="endTime"></td>
	                <td id="editor"></td>
	                <td id="modifyDate"></td>
	                <td id="isOnline"></td>
	                <td>
		                <a id="edit" href="javascript:;" class="btn medium primary-bg">
	                    	<span class="button-content">编辑</span>
	                    </a>
	                    <a id="delete" href="javascript:;" class="btn medium primary-bg"">
	                    	<span class="button-content">删除</span>
	                    </a>
	                </td>
	            </tr>
	        	<#list sentences.list as sentence>
					<tr id="${sentence.id}">
						<td>${sentence.content}</td>
		                <td>${(sentence.startTime?string('yyyy-MM-dd HH:mm'))!'-'}</td>
		                <td>${(sentence.endTime?string('yyyy-MM-dd HH:mm'))!'-'}</td>
		                <td>${sentence.editor}</td>
		                <td>${(sentence.modifyDate?string('yyyy-MM-dd HH:mm'))!'-'}</td>
		                <td>${sentence.isOnline?string('上线','未上线')}</td>
		                <td>
			                <a href="javascript:;" class="btn medium primary-bg" onclick="showEdit(${sentence.id});">
		                    	<span class="button-content">编辑</span>
		                    </a>
		                    <a href="javascript:;" class="btn medium primary-bg" onclick="showDelete(${sentence.id});">
		                    	<span class="button-content">删除</span>
		                    </a>
		                </td>
		            </tr>
				</#list>    
	    	</tbody>
	    </table>
	    <div class="button-group center-div">
	    	${pagerHelper.content}
	    </div>
    </div>
</div>
<div id="add-sentence-template" class="hide">
	<form>
		<div class="form-row">
			<div class="form-input col-md-12">
                <textarea placeholder="添加内容（30个字以内）" rows="8" name="content" data-required="true"></textarea>
            </div>
		</div>
		<div class="form-row">
			<div class="form-label col-md-2">
                <label for="startTime">开始时间:</label>
            </div>
            <div class="form-input col-md-4">
                <input name="startTime" placeholder="默认为次日，可选择" type="text" onclick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
            </div>
            <div class="form-label col-md-2">
                <label for="endTime">结束时间:</label>
            </div>
            <div class="form-input col-md-4">
                <input name="endTime" placeholder="默认为次日，可选择" type="text" onclick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})">
            </div>
		</div>
		<div class="form-row">
			<div class="form-label col-md-2">
                <label for="title">是否在线:</label>
            </div>
            <div class="form-input col-md-4">
	            <select name="isOnline">
	            	<option value="0" >否</option>
	        		<option value="1" selected>是</option>
	        	</select>
            </div>
		</div>
	</form>
</div>

<script type="text/javascript">

function showAdd(){
	var html = '<div id="dialog" class="hide" title="添加每日一句"><div class="mrg10A">' + $("#add-sentence-template").html() + '</div></div>';
	$( html ).dialog({
        resizable:!0,
        minWidth:600,
        minHeight:350,
        modal:!0,
        dialogClass:"modal-dialog",
        closeOnEscape:!0,
        close : function() {
			$( this ).dialog( "destroy" );
		},
        buttons: {
            保存: function() {
            	var valid = $('#dialog form').parsley( 'validate' );
            	if(!valid){
            		return;
            	}
            	
            	$.post( '/sentence', $( '#dialog form' ).serialize() )
                 .done(function(data){
                 	if(data["status"] == "success"){
                 		$.jGrowl("添加每日一句成功", {sticky:!1,position:"top-right",theme:"bg-green"});
                 		$( "#dialog" ).dialog( "close" );
                 		location.reload();
                 	}else{
                 		$.jGrowl(data["message"], {sticky:!1,position:"top-right",theme:"bg-red"});
                 	}
                 })
                 .fail(function(){
                 	$.jGrowl("添加每日一句失败", {sticky:!1,position:"top-right",theme:"bg-red"});
                 	$( "#dialog" ).dialog( "close" );
                 });
            }
		}
	});
};

function showEdit( id ){
	$.get( "/sentence/" + id + "/edit", function( data ){
		var html = '<div id="dialog" class="hide" title="编辑每日一句"><div class="mrg10A">' + data + '</div></div>';
		$( html ).dialog({
	        resizable:!0,
	        minWidth:600,
	        minHeight:350,
	        modal:!0,
	        dialogClass:"modal-dialog",
	        closeOnEscape:!0,
	        close : function() {
				$( this ).dialog( "destroy" );
			},
	        buttons: {
	            保存: function() {
	            	var valid = $('#dialog form').parsley( 'validate' );
	            	if(!valid){
	            		return;
	            	}
	            	
					$.ajax({
					    url: '/sentence/' + id + '.json',
					    type: 'POST',
					    data: $('#dialog form').serialize()
					}).done(function(data) {
					    if (data["status"] == "success") {
					        $.jGrowl("更新每日一句成功", {
					            sticky: !1,
					            position: "top-right",
					            theme: "bg-green"
					        });
					        $("#dialog").dialog("close");
					        location.reload();
					    } else {
					        $.jGrowl(data["message"], {
					            sticky: !1,
					            position: "top-right",
					            theme: "bg-red"
					        });
					    }
					}).fail(function() {
					    $.jGrowl("更新每日一句失败", {
					        sticky: !1,
					        position: "top-right",
					        theme: "bg-red"
					    });
					});
	            }
			}
		});
	});
};


function showDelete( id ){
	$.messager.confirm( "提示", "确定删除吗？", function(){
		$.ajax({
		    url: '/sentence/' + id,
		    type: 'POST',
		    data: { _method: 'DELETE' }
		})
	    .done(function(data){
	     	if(data["status"] == "success"){
	     		$.jGrowl("删除每日一句成功", {sticky:!1,position:"top-right",theme:"bg-green"});
	     		$('.table').find('tr[id=' + id + ']').remove();
	     	}else{
	     		$.jGrowl(data["message"], {sticky:!1,position:"top-right",theme:"bg-red"});
	     	}
	     })
	     .fail(function(){
	     	$.jGrowl("删除每日一句失败", {sticky:!1,position:"top-right",theme:"bg-red"});
	     });
	});
};

</script>